import React from 'react'
import { connect } from 'react-redux'
import { NavBar, TabBar } from 'antd-mobile'
import { Route, Switch } from 'react-router-dom'
import QueueAnim from 'rc-queue-anim'
import styles from './BasicLayout.module.scss'
import PreyList from '@/containers/list'
import UserCenter from '@/containers/userCenter'
import ChatGroup from '@/containers/chatGroup'
import { getMessages } from '@/redux/Chat.redux'
@connect(
    state => ({
        user: state.user.user,
        chat: state.chat
    }),
    { getMessages }
)
class BasicLayout extends React.Component{

    componentDidMount(){
        const { chat: { messages } } = this.props
        if(!messages.length) this.props.getMessages()
        //const regex = /\"([a-zA-Z0-9]*)\"/
        //const userId = browserCookie.get('userId')
        //console.log(userId.match(regex)[1])
    }

    render(){
        const { user: {type}, match: {url}, location: {pathname}, history, chat: { unReadCount } } = this.props
        const navList = [
            {
                path: `${url}/boss`,
                text: '牛人',
                icon: 'list',
                title: '牛人列表',
                component: PreyList,
                hidden: type === 'genius'
            },
            {
                path: `${url}/genius`,
                text: 'BOSS',
                icon: 'list',
                title: 'BOSS列表',
                component: PreyList,
                hidden: type === 'boss'
            },
            {
                path: `${url}/message`,
                text: '消息',
                icon: 'message',
                title: '消息列表',
                component: ChatGroup,
            },
            {
                path: `${url}/user`,
                text: '我',
                icon: 'user',
                title: '个人中心',
                component: UserCenter
            }
        ]
        const page = navList.find(v => v.path === pathname)
        return (
            <div className={styles['container']}>
                <NavBar
                    mode="dark"
                    className={styles['header']}
                >
                    { navList.find( item => item.path === pathname ).title }
                </NavBar>
                <QueueAnim
                    type={['right', 'left']}
                    ease={['easeOutQuart', 'easeInOutQuart']}
                >
                    <Route key={page.path} path={page.path} component={page.component} />
                </QueueAnim>
                <div className={styles['footer']}>
                    <TabBar>
                        {
                            navList
                                .filter(item => !item.hidden)
                                .map(item => (
                                    <TabBar.Item
                                        key={item.path}
                                        title={item.text}
                                        icon={{ uri: require(`@/assets/images/navbar/${item.icon}.png`) }}
                                        selectedIcon={
                                            <div className={styles['icon-wrapper']}>
                                                <div
                                                    className={styles['icon']}
                                                    style={{ backgroundImage: `url(${require(`@/assets/images/navbar/${item.icon}.png`)})` }}
                                                />
                                            </div>
                                        }
                                        selected={ item.path === pathname }
                                        onPress={() => {
                                            history.push(item.path)
                                        }}
                                        badge={ item.icon === 'message' ? unReadCount : 0 }
                                    >
                                    </TabBar.Item>
                                ))
                        }
                    </TabBar>
                </div>
            </div>
        )
    }
}

export default BasicLayout